<script setup>
import {
  listReceptionUser,
  getReceptionUser,
  addReceptionUser,
  updateReceptionUser,
  delReceptionUser,
} from '@/api/system/reception'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

const { visitorRecord_state } = proxy.useDict('visitorRecord_state')

const formRef = ref(null)
// visitorRecord_state
// 列表数据
const tableData = ref([])

const formValue = ref({})

const selectForm = ref([
  { type: '日期范围' },
  { label: '预约人', type: '输入框', model: 'reservationName' },
  { label: '状态', type: '下拉单选', model: 'state', opt: visitorRecord_state },
])

// 按钮枚举
const buttonList = ref([{ label: '新增', type: 'add' }])

// 列表枚举
const column = ref([
  { label: '接待人名称', prop: 'receptionName' },
  { label: '接待人电话', prop: 'receptionPhone' },
  { label: '创建时间', prop: 'createTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '操作', prop: 'x', width: '240' },
])

// state
const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false,
  btnLoading: false,
})

// 表单校验
const rules = reactive({
  receptionName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  receptionPhone: [
    { required: true, message: '请填写接待人电话', trigger: 'blur' },
    { validator: proxy.isPhone, trigger: 'blur' },
  ],
})

// 新增
const add = async () => {
  state.title = '新增'
  formValue.value = {}
  state.isShow = true
}

// 修改
const edit = async (receptionId) => {
  try {
    const { data: result } = await getReceptionUser(receptionId)
    formValue.value = result
    state.title = '修改'
    state.isShow = true
  } catch (err) {
    console.log(err)
  } finally {
  }
}

// 删除
const remove = async (ids) => {
  const is = await proxy.DelMessageBox('是否确认删除该轮播图？')
  if (!is) return
  await delReceptionUser(ids)
  getList()
  proxy.successMsg('删除成功!')
}

// 查看
const look = async (receptionId) => {
  try {
    const { data: result } = await getReceptionUser(receptionId)
    formValue.value = result
    state.title = '查看'
    state.disabled = true
    state.isShow = true
  } catch {
  } finally {
  }
}

// 新增提交
const addSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await addReceptionUser(formValue.value)
    close()
    getList()
    proxy.successMsg('新增成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await updateReceptionUser(formValue.value)
    getList()
    close()
    proxy.successMsg('修改成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 关闭
const close = () => {
  formValue.value = {}
  state.isShow = false
}

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 查询提交
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// 查询轮播图列表
const getList = async () => {
  state.loading = true
  try {
    const result = await listReceptionUser(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}
getList()
</script>

<template>
  <div class="app-container">
    <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" />
    <x-button :list="buttonList" @add="add" />
    <x-table
      keyId="receptionId"
      :loading="state.loading"
      :column="column"
      :data="tableData"
      :total="state.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getList"
    >
      <template #columnCell="{ column, record }">
        <div v-if="column.prop == 'x'" class="operate">
          <el-link icon="Edit" type="primary" @click="edit(record.receptionId)"
            >修改</el-link
          >
          <el-link
            icon="DeleteFilled"
            type="danger"
            @click="remove(record.receptionId)"
            >删除</el-link
          >
          <el-link
            icon="Search"
            type="primary"
            @click="look(record.receptionId)"
            >查看</el-link
          >
        </div>
      </template>
    </x-table>
    <!-- 添加或修改轮播图对话框 -->
    <x-dialog
      width="500px"
      :loading="state.btnLoading"
      :title="state.title"
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
    >
      <el-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="接待人名称" prop="receptionName">
          <el-input
            clearable
            :disabled="state.disabled"
            v-model="formValue.receptionName"
            placeholder="请输入接待人名称"
          />
        </el-form-item>
        <el-form-item label="接待人电话" prop="receptionPhone">
          <el-input
            clearable
            :disabled="state.disabled"
            v-model="formValue.receptionPhone"
            placeholder="请输入接待人电话"
          />
        </el-form-item>
      </el-form>
    </x-dialog>
  </div>
</template>
